<template>
  <div class="app-container">
    <el-card v-loading="loading">
      <div slot="header">
        <el-button type="primary" @click="resetForm()">返回</el-button>
      </div>
      <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="供应商编码" prop="supplierNo">
          <el-input placeholder="供应商编码" v-model="formData.supplierNo"/>
        </el-form-item>
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input placeholder="供应商名称" v-model="formData.supplierName"/>
        </el-form-item>
        <el-form-item label="供应商地址" prop="supplierAddress">
          <el-input placeholder="供应商地址" v-model="formData.supplierAddress"/>
        </el-form-item>
        <el-form-item label="供应商等级" prop="supplierLevel">
        <el-input placeholder="供应商等级" v-model="formData.supplierLevel"/>
      </el-form-item>
        <el-form-item label="联系方式" prop="supplierPhone">
          <el-input placeholder="联系方式" v-model="formData.supplierPhone"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm">关闭</el-button>
          <el-button :loading="isAdd" type="primary" @click="submitForm('ruleForm')">
            <span v-if="isAdd">提交中...</span>
            <span v-else>提交</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { supplierDetail, newSupplier, updateSupplier } from '@/api/essentialInformation.js'
let $this = null
export default {
  name: 'submitForm',
  props: {
    subData: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      isAdd: false,
      loading: false,
      formData: {},
      rules: {}
    }
  },
  created () {
    $this = this
    if ($this.subData.btnId == 1) {
      $this.supplierDetail()
    }
  },
  methods: {
    supplierDetail () {
      $this.loading = true
      supplierDetail($this.subData.id).then(res => {
        $this.loading = false
        $this.formData = res.data.data
      }).catch(err => { $this.loading = false })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return $this.$message.error('请完善表单信息')
        }
        if ($this.subData.btnId == 0) {
          $this.isAdd = true
          newSupplier($this.formData).then(res => {
            $this.isAdd = false
            if (res.data.code == 500) {
              return $this.$message.error(res.data.message)
            }
            $this.$emit('refresh')
          }).catch(err => { $this.isAdd = false })
        }
        if ($this.subData.btnId == 1) {
          $this.isAdd = true
          updateSupplier($this.formData).then(res => {
            $this.isAdd = false
            if (res.data.code == 500) {
              return $this.$message.error(res.data.message)
            }
            $this.$emit('refresh')
          }).catch(err => { $this.isAdd = false })
        }
      })
    },
    resetForm () {
      $this.$emit('closeView')
    }
  }
}
</script>

<style scoped lang="scss">
  .el-input {
    width: 500px;
  }
</style>
